import React from 'react';
import { Row, Col, Button } from 'antd';
import html2canvas from 'html2canvas';
import JSZip from 'jszip';
import demoIocn from "./1.png";
import ccc from './4d0a9530-8aa9-4416-87b4-9ef103679a8f.png';
import dd from './ChatGPT Image 2025年4月25日 15_13_13.png';
import aa from './ChatGPT Image 2025年4月25日 15_16_23.png';

import style from './index.scss';
const list = [
  { title: 'INFJ + 白羊座', img: demoIocn, btnTitle: '火爆战士🔥 ' },
  { title: 'INFJ + 射手座', img: ccc, btnTitle: ' 未来智者🫵' },
  { title: 'INFJ + 金牛座', img: dd, btnTitle: '内敛智者🌿 ' },
  { title: 'INFJ + 双子座', img: aa, btnTitle: '分裂哲人🌓' },
]

const contentList = [
  {
    data: [
      '【角色】 火爆战士🔥 / 理想主义者的破坏者',
      '【内核】 叛逆梦想家/绝不妥协的理想主义暴徒',
      '##白天：“你告诉我，为什么这不行？我才不信，我的方案就能改变一切！（坚定信念，处处与常规作斗争）',
      '##深夜：“这个世界真是够了，按我来说该怎样就怎样！我能改变一切，只要你愿意相信我！（在心中燃烧着一股无法扑灭的激情，想要推翻一切不公）',
      '🔥 我能为世界献出一切，但你最好别惹我，否则我会让你明白我的决心'
    ], color: '#d57a55', textColor: '#fff',
  },
  {
    data: [
      '【角色】 未来智者 🫵 / 充满激情的理想主义导师',
      '【内核】 探索的梦想家/永不放弃的真理追寻者',
      '##白天： 我知道你们现在无法理解，但总有一天你会明白。（以冷静、深思熟虑的态度指导他人，给予深刻的见解）',
      '##深夜： 我相信每个人都能找到自己的使命，这个世界需要你们的改变。（深夜思考未来，激励自己去改变世界，反思个人使命）',
      '🫵 我是一个理想主义者，但我同样相信，追寻梦想的路上，永远没有终点。'
    ], color: '#fadbc8', textColor: '#ae7669',
  },
  {
    data: [
      '【角色】 未来智者 🫵 / 充满激情的理想主义导师',
      '【内核】 探索的梦想家/永不放弃的真理追寻者',
      '##白天： 我知道你们现在无法理解，但总有一天你会明白。（以冷静、深思熟虑的态度指导他人，给予深刻的见解）',
      '##深夜： 我相信每个人都能找到自己的使命，这个世界需要你们的改变。（深夜思考未来，激励自己去改变世界，反思个人使命）',
      '🫵 我是一个理想主义者，但我同样相信，追寻梦想的路上，永远没有终点。'
    ], color: '#e6d9ab', textColor: '#9b8b51',
  },
  {
    data: [
      '【角色】 分裂哲人🌓 / 情绪风暴中的智慧使者',
      '【内核】 内敛的多面手 / 用安静的理智包裹住躁动的思维',
      '##白天： 我觉得你说的有道理，但我也理解他为什么这么做。（一边在会议上冷静分析，一边默默开两个小号投票）',
      '##深夜： 我到底是哪一个我？为什么我能劝别人走出情绪，却说服不了自己停下？（在理性与感性间来回穿梭，反复自省）',
      '⭐️ 我永远在变，但每一个我都是真实的我'
    ], color: '#c9f6fb', textColor: '#6a9086',
  },
]

const downloadZip = async () => {
  try {
    const zip = new JSZip();
    // 处理 container_${i}
    for (let i = 0; i < contentList.length; i++) {
      const container = document.getElementById(`container_${i}`);
      if (container) {
        const canvas = await html2canvas(container);
        const blob = await new Promise<Blob | null>((resolve) => {
          canvas.toBlob((blob) => {
            resolve(blob);
          }, 'image/png');
        });
        if (blob) {
          zip.file(`container_${i}.png`, blob);
        }
      }
    }
    // 处理 container_content
    const containerContent = document.getElementById('container_content');
    if (containerContent) {
      const canvas = await html2canvas(containerContent);
      const blob = await new Promise<Blob | null>((resolve) => {
        canvas.toBlob((blob) => {
          resolve(blob);
        }, 'image/png');
      });
      if (blob) {
        zip.file('container_content.png', blob);
      }
    }
    // 生成并下载压缩包
    const content = await zip.generateAsync({ type: 'blob' });
    const url = URL.createObjectURL(content);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'mbit_images.zip';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  } catch (error) {
    console.error('下载压缩包时出错:', error);
  }
};
export default function Index() {
  return (
    <div className={style.mbit_wrapper}>
      <Button type='primary' onClick={downloadZip}>下载</Button>
      <div className={style.item_list}>
        <Row className={style.item} id='container_content'>
          {
            list?.map((item => {
              return <Col span={12} className={style.item_content}>
                <div className={style.content_title}>{item?.title}</div>
                <div className={style.content_img}>
                  <img src={item?.img} alt="" />
                </div>
                <div className={style.btn_title}>{item?.btnTitle}</div>
              </Col>
            }))
          }
        </Row>
        {
          contentList?.map((item, i) => {
            const headerData = list[i];
            const headerTitle = `${headerData?.title} = ${headerData?.btnTitle}`;
            return <Row className={style.container} style={{ backgroundColor: item?.color, color: item?.textColor }} id={`container_${i}`}>
              <div className={style.container_item} style={{ marginLeft: '14px', fontSize: '30px', marginTop: '120px',marginBottom:'50px' }} >
                <div className={style.content_item_title}>{headerTitle}</div>
              </div>
              {
                item?.data?.map((subItem, index) => {
                  let isMatch = subItem?.includes('##');
                  const newString = subItem.replace(/##/g, '');
                  return <div key={index} className={style.container_item} style={{ paddingLeft: isMatch ? '40px' : '0px' }}>
                    <div className={style.content_item_title}>{isMatch ? newString : subItem}</div>
                  </div>
                })
              }
              <img className={style.container_img} src={headerData?.img} alt="" />
            </Row>
          })
        }
      </div>
    </div>
  );
}
